<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/sub.css">
<link rel="stylesheet" href="css/jquery.flex-images.css">
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<style>
    .nav-box .xiangying{
        width: 29%;
    }
    @media (max-width: 1376px) {
        .nav-box .xiangying{
            width: 24%;
        }
    }
</style>
<body style="background: #F7F8FA">


<div id="bigimg-box" style="display: none;">
    <div class="load-bg"></div>
    <div class="load-box">
        <div class="window-left-box">
            <div class="bigpic-box">
                <div><span class="title">图片标题</span><span class="pull-right"><a><img style="width: 29%;margin-right: 20px;" src="images/down-load-icon.png"></a><a><img style="width: 29%" src="images/full-icon.png"></a></span></div>
                <div class="big-pic-box"><img src="images/window-big-img.png"></div>
                <ul>
                    <li><span class="name">分类信息：</span>公路</li>
                    <li><span class="name">拍摄人：</span>张三</li>
                    <li><span class="name">拍摄时间：</span>2016-08-08</li>
                    <li><span class="name">拍摄地点：</span>太空</li>
                </ul>
            </div>
        </div>
        <div class="window-right-box">
            <div class="bigpic-box">
                <div><span class="title">所属分类</span></div>
                <ul>
                    <li ><img class="active" src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                    <li><img src="images/window-big-img.png"></li>
                    <li><img src="images/window-big-img-1.png"></li>
                    <li><img src="images/window-big-img-2.png"></li>
                </ul>
            </div>
            <a class="pic-window-close" onclick="$('#bigimg-box').hide()"><img src="images/window-close-icon.png"></a>
        </div>
    </div>
</div>




<div id="flow">
    <div style="position: relative;">
        <div id="go_top"><a><img src="images/flow-to-top-icon.png"></a></div>
        <div id="sub-cat-btn">
            <a><img src="images/flow-to-cat-icon.png"></a>
            <div class="flow-sub-cat" style="display: none">
                <ul>
                    <li style="background: url(images/sub/cat-icon-1.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-2.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-3.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-4.png) left center no-repeat;"><a>公路视讯</a></li>
                    <li style="background: url(images/sub/cat-icon-5.png) left center no-repeat;border: none"><a>公路视讯</a></li>
                </ul>
            </div>
        </div>

    </div>


</div>

<div id="first-top-nav" class="main" style="position: relative;z-index: 90;width: 100%;background: #F7F8FA;">
    <div class="top-nav-box over-flow">
        <span class="pull-left">今天是:2016年07月25日&nbsp;&nbsp;星期一</span>
        <span class="pull-right"><a class="login-btn">登陆</a>&nbsp;|&nbsp;<a>注册</a>&nbsp;|&nbsp;<a>设为首页</a></span>
    </div>
    <script>
        $( function() {
            $( '.first-li' ).stop().mouseover( function() {
                $( this ).addClass( 'active' )
                $( this ).find( '.sub-nav-box' ).stop().slideDown( 'fast' )
            } ).mouseout( function() {
                $( this ).removeClass( 'active' )
                $( this ).find( '.sub-nav-box' ).stop().slideUp( 'fast' )
            } )
            $( window ).scroll( function() {
                var temp_top = $( window ).scrollTop();
                if( temp_top > 128 ) {
                    $( ".big-nav" ).hide()
                    $("#banner-nav" ).hide()
                    $( "#first-top-nav" ).css( { 'position': 'fixed' } )
                    $( ".small-nav" ).show()
                }
                else {
                    $( ".big-nav" ).show()
                    $("#banner-nav" ).show()
                    $( "#first-top-nav" ).css( { 'position': 'relative' } )
                    $( ".small-nav" ).hide()
                }
                console.info()
            } );
        } )
    </script>

</div>


<div class="small-nav" style="position: fixed;top:40px;z-index: 90;width: 100%;background: #F7F8FA;display: none;">
    <div class="nav-box " style="">
        <div class="logo-box pull-left"><img src="images/logo.png"></div>
        <ul class="nav-list pull-left">
            <li class="first-li has-sub">
                <a class="first-a" href="shouye.html" style="width: 85px;">首页</a>
                <ul class="sub-nav-box">
                    <li><a>政务网</a></li>
                    <li class="last"><a>活动网</a></li>
                </ul>
            </li>
            <li class="first-li  has-sub">
                <a class="first-a" style="" href="pic-2.html" class="">图片</a>
                <ul class="sub-nav-box ">
                    <li><a>法律法规</a></li>
                    <li><a>交通杂志</a></li>
                    <li><a>交通简讯</a></li>
                    <li><a>交通年鉴</a></li>
                    <li><a>每日网讯</a></li>
                    <li><a>交通志</a></li>
                    <li class="last"><a>其它</a></li>
                </ul>
            </li>
            <li class="first-li has-sub">
                <a class="first-a"  href="wendang-sub.html"
                   style="width: 85px;">文档</a>
                <ul class="sub-nav-box over-flow">
                    <li><a>公路</a></li>
                    <li><a>水路</a></li>
                    <li><a>铁路</a></li>
                    <li><a>民航</a></li>
                    <li><a>综合管理</a></li>
                    <li class="last"><a>摄影师</a></li>
                </ul>
            </li>
            <li class="first-li">
                <a class="first-a" href="shipin-sub.html">视频</a>
            </li>
            <li class="first-li curr"><a class="first-a">文献</a></li>
            <li class="first-li"><a style="color: rgb(51, 51, 51);" href="global-nav.html">全站导航</a></li>
        </ul>
        <div class="xiangying over-flow pull-right" style="padding: 25px 0px;">
            <div class="search-box-list" style="width: 80%">
                <input id="search-one" type="text" class="main-search-input" placeholder="请输入关键词"/>
            </div>
            <div class="search-box-list" style="width: 20%">
                <input class="main-search-btn" type="submit" value="搜索"/>
            </div>
        </div>
    </div>
</div>
<!--big start-->
<div class="big-nav" >
    <div class="nav-box">
        <div class="logo-box pull-left"><img src="images/logo.png"></div>
        <ul class="nav-list pull-left">
            <li class="first-li has-sub">
                <a class="first-a" href="shouye.html" style="width: 85px;">首页</a>
                <ul class="sub-nav-box">
                    <li><a>政务网</a></li>
                    <li class="last"><a>活动网</a></li>
                </ul>
            </li>
            <li class="first-li  has-sub">
                <a class="first-a" style="" href="pic-2.html" class="">图片</a>
                <ul class="sub-nav-box ">
                    <li><a>法律法规</a></li>
                    <li><a>交通杂志</a></li>
                    <li><a>交通简讯</a></li>
                    <li><a>交通年鉴</a></li>
                    <li><a>每日网讯</a></li>
                    <li><a>交通志</a></li>
                    <li class="last"><a>其它</a></li>
                </ul>
            </li>
            <li class="first-li has-sub">
                <a class="first-a"  href="wendang-sub.html"
                   style="width: 85px;">文档</a>
                <ul class="sub-nav-box over-flow">
                    <li><a>公路</a></li>
                    <li><a>水路</a></li>
                    <li><a>铁路</a></li>
                    <li><a>民航</a></li>
                    <li><a>综合管理</a></li>
                    <li class="last"><a>摄影师</a></li>
                </ul>
            </li>
            <li class="first-li">
                <a class="first-a" href="shipin-sub.html">视频</a>
            </li>
            <li class="first-li curr"><a class="first-a">文献</a></li>
            <li class="first-li"><a style="color: rgb(51, 51, 51);" href="global-nav.html">全站导航</a></li>
        </ul>
        <div class="pull-right">
            <button onclick="location.href='pic-1.html'" class="change-model-btn">切换到瀑布流模式</button>
        </div>
    </div>
    <div id="fixed-box" style=""></div>
    <div class="main over-flow clearfix">

    </div>

    <div id="banner-nav" class="main over-flow clearfix" style="">
        <div class="content-box over-flow">
            <div>
                <div class="xiangying over-flow pull-left" style="margin-right: 20px;">
                    <div class="search-box-list" style="width: 80%">
                        <input id="search-one" type="text" class="main-search-input" placeholder="请输入关键词"/>
                    </div>
                    <div class="search-box-list" style="width: 20%">
                        <input class="main-search-btn" type="submit" value="搜索"/>
                    </div>

                </div>
                <div class="cat-icon-list over-flow pull-left">
                    <dl class="pull-left active">
                        <dt><img src="images/sub/cat-icon-1.png"></dt>
                        <dd>公路视讯</dd>
                    </dl>
                    <dl class="pull-left">
                        <dt><img src="images/sub/cat-icon-2.png"></dt>
                        <dd>公路视讯</dd>
                    </dl>
                    <dl class="pull-left">
                        <dt><img src="images/sub/cat-icon-3.png"></dt>
                        <dd>公路视讯</dd>
                    </dl>
                    <dl class="pull-left">
                        <dt><img src="images/sub/cat-icon-4.png"></dt>
                        <dd>公路视讯</dd>
                    </dl>
                    <dl class="pull-left">
                        <dt><img src="images/sub/cat-icon-5.png"></dt>
                        <dd>公路视讯</dd>
                    </dl>
                </div>
                <div class="pull-right" style="text-align: right">
                    <p style="font-size: 25px;color: #2390D0;padding-bottom:0px;margin: 0px;">1739</p>

                    <p>共1739个视频</p>
                </div>
            </div>

            <ul class="pipei-words-list clearfix">
                <li class="active"><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
                <li><a>匹配关键词</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="main over-flow clearfix">

</div>

<div class="main over-flow">
    <div class="flex-images">


    </div>
</div>

<div class="foot over-flow clearfix">
    <div class="foot-box">
    <div class="over-flow" style="background: url(images/foot-bg.png) top right no-repeat;height: 120px;">
        <div class="box content text-center">
            <p>您是第<span style="background: #909090;color: #fff;display: inline-block;padding: 0px 3px;margin: 0px 8px;">6879456</span>位访者</p>
            <p>2013&nbsp;&nbsp;版权所有&nbsp;&nbsp;重庆市交通委员会&nbsp;&nbsp;联系电话：023-8918300&nbsp;&nbsp;传真：023-89183222<span style="display: inline-block;background: url(images/foot-2.png) left center no-repeat;padding-left: 20px;">渝ICP备0978456号</span></p>
            <p>技术支持：重庆旺山实业有限公司</p>
        </div>

    </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.flex-images.min.1.0.4.js"></script>
<script>

    function loadPhoto(){
        $.post('json.php',{},function(response){
            $(response).appendTo('.flex-images').find('img').lazyload({ effect: "fadeIn", threshold :10 });
            $('.flex-images').flexImages({'rowHeight':200});
        },'json')
    }
   loadPhoto()
    $(window).on('scroll',function(){
        var scrollTop = $(document).scrollTop(),
                windowH = $(window).height(),
                documentH = $(document).height(),
                nowH = scrollTop + windowH;
        if( nowH >= documentH - 550 ){
            loadPhoto();
        }
    })


</script>
</body>
</html>